<template>
  <j-modal :title="title" :width="1000" :visible="visible" :footer="null" switchFullscreen @cancel="handleCancel">
    <a-spin :spinning="loading">
      <!-- 基本信息 -->
      <a-card title="基本信息" size="small" style="margin-bottom: 16px">
        <a-descriptions :column="2" bordered size="small">
          <a-descriptions-item label="模板编码">
            {{ templateData.templateCode }}
          </a-descriptions-item>
          <a-descriptions-item label="模板名称">
            {{ templateData.templateName }}
          </a-descriptions-item>
          <a-descriptions-item label="是否默认">
            <a-badge v-if="templateData.isDefault == 1" status="success" text="是" />
            <a-badge v-else status="default" text="否" />
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-badge v-if="templateData.status == 1" status="success" text="启用" />
            <a-badge v-else status="error" text="停用" />
          </a-descriptions-item>
          <a-descriptions-item label="模板描述" :span="2">
            {{ templateData.description || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="备注" :span="2">
            {{ templateData.remark || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="创建人">
            {{ templateData.createBy }}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ templateData.createTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 工种配置 -->
      <a-card title="工种配置" size="small">
        <a-table
          :columns="workTypeColumns"
          :dataSource="workTypeList"
          :pagination="false"
          rowKey="id"
          size="small"
          bordered
        >
          <template slot="isRequired" slot-scope="text">
            <a-badge v-if="text == 1" status="success" text="是" />
            <a-badge v-else status="default" text="否" />
          </template>
        </a-table>
      </a-card>
    </a-spin>
  </j-modal>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'TemplateDetail',
  data() {
    return {
      title: '模板详情',
      visible: false,
      loading: false,
      templateData: {},
      workTypeList: [],
      workTypeColumns: [
        {
          title: '序号',
          dataIndex: 'sequence',
          width: 80,
          align: 'center',
        },
        {
          title: '工种编码',
          dataIndex: 'workTypeCode',
          width: 120,
          align: 'center',
        },
        {
          title: '工种名称',
          dataIndex: 'workTypeName',
          width: 150,
          align: 'center',
        },
        {
          title: '是否必需',
          dataIndex: 'isRequired',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'isRequired' },
        },
        {
          title: '备注',
          dataIndex: 'remark',
          align: 'center',
        },
      ],
    }
  },
  methods: {
    showDetail(id) {
      this.visible = true
      this.loading = true
      this.loadTemplateDetail(id)
    },
    loadTemplateDetail(id) {
      getAction(`/mes/template/detail/${id}`)
        .then((res) => {
          if (res.success && res.result) {
            this.templateData = res.result.template || {}
            this.workTypeList = res.result.workTypes || []
          } else {
            this.$message.error('加载模板详情失败')
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCancel() {
      this.visible = false
      this.templateData = {}
      this.workTypeList = []
    },
  },
}
</script>

<style lang="less" scoped>
</style>
